<script setup lang='ts'>
  import { onMounted, reactive, ref } from 'vue';
  import { statisticsApi } from '@/api/controller';
  import { ToastError, Toastloading } from '@/utils/public';
  const action = reactive({
    list:[] as any[],
  })
  const getList = async()=> {
    const loading = Toastloading()
    const res = await statisticsApi.tomorrow()
    loading.close()
    const { data=[] } = res
    action.list = data
  }
  const formatter = (row:any = {}, index:number = -1) => {
    const { tomorrow_recharge_rate:reteval } = row
    const rate = reteval?reteval.split('%')[0]:0
    return rate > 0
  }
  onMounted(()=>{
    getList()
  })
</script>

<template>
  <div class="xm-content">
    <el-table
      class="xm-main xm-TableCenter"
      :data="action.list"
      border>
      <el-table-column min-width="120" prop="create_time" label="日期" />
      <el-table-column min-width="120" sortable prop="usernums" label="次日留存人数" />
      <el-table-column min-width="120" sortable :sort-by="formatter" prop="tomorrow_recharge_rate" label="首充用户次日留存率" />
      <el-table-column min-width="120" sortable prop="tomorrow_recharge_money" label="次日留存充值金额" />

      <el-table-column min-width="120" sortable prop="beforeThreeUsers" label="3日留存人数" />
      <el-table-column min-width="120" sortable prop="beforeThreeUsers_rate" label="首充用户3日留存" />
      <el-table-column min-width="120" sortable prop="beforeThreeUsers_money" label="3日充值金额" />

      <el-table-column min-width="120" sortable prop="beforeSevenUsers" label="7日留存人数" />
      <el-table-column min-width="120" sortable prop="beforeSevenUsers_rate" label="首充用户7日留存" />
      <el-table-column min-width="120" sortable prop="beforeSevenUsers_money" label="7日充值金额" />
    </el-table>
  </div>
</template>